<template>
  <!-- 个人中心 -->
  <div class="person_container container bg">
    <!-- 顶部展示图 -->
    <div class="top-show">
      <image mode="aspectFit" class="top-show-img" src="https://img02.hua.com/wxmp/hua/def_user_header.png"></image>
    </div>
    <div class="wrap">
      <!--    登录状态-->
      <div class="user-container section">
        <image ></image>
        <text class="ellipsis"></text>
        <navigator url="/pages/setUserInfo/setUserInfo">
          <text class="ellipsis">修改用户数据</text>
        </navigator>
      </div>

      <!--    未登录状态-->
      <div class="user-container section" >
        <image src=""></image>
        <text class="ellipsis">建工高启强</text>
        <navigator url="/pages/login/index">
          <text>
            请登陆
          </text>
        </navigator>
      </div>
      <div class="order section">
        <div class="order-title-wrap">
          <text class="title">我的订单</text>
          <text class="more">查看更多></text>
        </div>
        <div class="order-content-wrap">
          <div class="order-content-item" bindtap="gotoOrderList">
            <div class="iconfont icon-dingdan"></div>
            <text  @click="gocarList">商品订单</text>
          </div>
          <div class="order-content-item">
            <div class="iconfont icon-lipinka"></div>
            <text>礼品卡订单</text>
          </div>
          <div class="order-content-item">
            <div class="iconfont icon-tuikuan"></div>
            <text>退款/售后</text>
          </div>
        </div>
      </div>
      <div class="order section">
        <div class="order-title-wrap">
          <text class="title">我的功能</text>
        </div>
        <div class="order-content-wrap function">
          <navigator url="/pages/address/list/list" open-type="navigate">
            <div class="order-content-item">
              <div class="iconfont icon-daohangdizhi"></div>
              <text>地址管理</text>
            </div>
          </navigator>
          <div class="order-content-item">
            <div class="iconfont icon-kefu_o"></div>
            <text>我的客服</text>
          </div>
        </div>
      </div>
      <div class="after-scale section">
        <div class="order-title-wrap">
          <text class="title">关于售前售后服务</text>
        </div>
        <div class="after-scale-item">
          <div class="iconfont icon-kefu_o"></div>
          <text>可与小程序客服实时聊天或电话咨询</text>
        </div>
        <div class="after-scale-item">
          <div class="iconfont icon-shijian"></div>
          <text>小程序客服工作时间为: 8:30 ~ 20:30</text>
        </div>
        <div class="after-scale-item">
          <div class="iconfont icon-dizhiguanli"></div>
          <text>鲜花制作完毕情况下暂不支持退款</text>
        </div>
        <div class="after-scale-item">
          <div class="iconfont icon-zhangben"></div>
          <text>鲜花可以提前7-15天预订重大节假日不支持定时配送</text>
        </div>
      </div>
      <div class="info-footer">尚硅谷技术支持</div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
    name:"userInfo"
    }
</script>
<script lang="ts" setup>
function gocarList(){
  console.log(11111111)
  uni.navigateTo({
    url:'/pages/carList/carList'
  })
}

</script>

<style>
.bg {
  background-color: #f7f4f8;
}
.top-show {
  width: 100%;
  height: 360rpx;
}
.top-show-img {
  width: 100%;
  height: 100%;
}
.ellipsis {
  width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.wrap {
  margin: 0 30rpx;
}

.section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
}

.user-container {
  display: flex;
  align-items: center;

  margin-top: -40rpx;
  color: #999;
}
.user-container image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.order {
  background-color: #fff;
  margin-top: 20rpx;
}
.order-title-wrap,
.order-content-wrap {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
}
.order-title-wrap .title {
  color: #444;
  font-weight: 700;
}
.order-title-wrap .more {
  color: #ccc;
  font-size: 20rpx;
}
.order-content-wrap {
  display: flex;
}

.order-content-wrap .iconfont {
  font-size: 60rpx;
}
.order-content-wrap text {
  font-size: 25rpx;
  margin-top: 20rpx;
}
.order-content-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.function {
  display: flex;
  justify-content: left;
}
.function .order-content-item {
  margin-right: 30rpx;
}
.icon-daohangdizhi {
  color: rgb(117, 207, 125);
}
.icon-kefu_o {
  color: rgb(230, 154, 12);
}

.after-scale {
  margin-top: 30rpx;
}

.after-scale-item {
  display: flex;
  margin: 25rpx 15rpx;
  color: #999;
}
.after-scale-item text {
  font-size: 25rpx;
  margin-left: 20rpx;
}
.after-scale-item .iconfont {
  color: #a2b364;
}

.info-footer {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #aaa;
  font-size: 25rpx;
}

</style>